<!DOCTYPE html>
<html height100 xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta th:replace="authority/dynamic/common/edit/head"/>
</head>

<body class="childrenBody" padding10>
<form class="layui-form layui-form-pane" lay-filter="form-dml" onsubmit="return false;">
    <input type="hidden" name="id" value="">
    <div class="layui-form-item">
        <label for="D_title" class="layui-form-label"><span class="x-red">*</span>标题</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="D_title" name="title" lay-verify="required"
                   placeholder="标题" autocomplete="off" value="">
        </div>
        <div class="my-notes">
            <div class="layui-elip layui-text content">
                用于页面标题
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea placeholder="备注" class="layui-textarea"></textarea>
        </div>
    </div>

    <!--/*@thymesVar id="id" type="java.lang.String"*/-->
    <div th:if="${id}">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">配置表格
                    <small>（可以不点击保存）</small>
                </h2>
                <div class="layui-colla-content layui-show" style="padding: 0">
                    <iframe style="height: 350px;width: 100%;border: none;"
                            th:src="@{/authority/dynamic_page/table/list.html(pageId=${id})}"></iframe>
                </div>
            </div>
        </div>
        <div class="layui-form-item" pane>
        </div>
    </div>
    <div class="layui-form-item" pane>
        <label for="D_state" class="layui-form-label"><span class="x-red">*</span>状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="state" id="D_state" lay-skin="switch" checked lay-text="正常|无效">
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn" style="float: right" id="my-submit" lay-filter="submit" lay-submit>保存信息</button>
    </div>
</form>

<script th:replace="authority/common/currency/footer"></script>
<script>
    $('body').on('mouseover', '.my-notes .content', function (event) {
        $('.my-notes .my-notes-show').each(function (i, e) {
            $(this).remove();
        });
        $(this).closest('.my-notes').append($('<div class="my-notes-show"></div>').append($('<div class="layui-text"><div>').html($(this).html())));
        //鼠标悬浮
    }).on('mouseout', '.my-notes-show', function (event) {
        //鼠标离开
        $(this).remove();
    });
    layui.use(['form', 'lutil', 'element'], function () {
        var form = layui.form,
            lutil = layui.lutil,
            element = layui.element;

        form.on('submit(submit)', function (formData) {
            var loading = layer.load(2, {shade: [0.3, '#eee']});
            ajaxRequestByCsrf(content_path + 'authority/dynamic_page/save.do', $.extend(formData.field, {
                state: formData.field['state'] ? 1 : 0
            }), function (res) {
                lutil.success_msg(res.message);
                var index = window.name && parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index);
            }, null, function (res) {
                layer.close(loading);
            });
            return false;
        });

        if ("[[${id}]]" !== '') {
            var loading = layer.load(2, {shade: [0.3, '#eee']});
            ajaxRequestByCsrf(content_path + 'authority/dynamic_page/detail/[[${id}]].do', {}, function (res) {
                form.val("form-dml", $.extend(res.data, {state: res.data['state'] === 1}));
            }, null, function (res) {
                layer.close(loading);
            });
        }
    })
</script>
</body>
</html>